<script setup lang="ts">
import { useRouter } from 'vue-router';

const router = useRouter();

const items = [
  { id: 1, title: 'Numbers 6-7页' },
  { id: 2, title: '单词学习 2' },
  { id: 3, title: '单词学习 3' },
  { id: 4, title: '单词学习 4' },
  { id: 5, title: '单词学习 5' },
  { id: 6, title: '单词学习 6' },
  { id: 7, title: '单词学习 7' },
  { id: 8, title: '单词学习 8' },
  { id: 9, title: '单词学习 9' },
  { id: 10, title: '单词学习 10' },
];

const onItemClick = (item) => {
  if (item.id === 1) {
    // 第一条信息跳转到 _1numbers_6_7.vue
    router.push('/danci/_1numbers_6_7');
  } else {
    // 其他项跳转到百度
    window.open('https://www.baidu.com', '_blank');
  }
};
</script>

<template>
  <div class="scrollable-list">
    <div 
      v-for="(item,inex) in items"
      :key="item.id" 
      class="list-item"
      @click="onItemClick(item)"
    >
      <span class="item-title">{{inex+1}},{{ item.title }}</span>
      <span class="arrow">></span>
    </div>
  </div>
</template>

<style scoped lang="less">
.scrollable-list {
  height: 100vh; // 全屏高度，可根据需要调整
  overflow-y: auto;
  background-color: white;
  
  .list-item {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    border-bottom: 1px solid #e0e0e0; // 灰色分割线
    color: black;
    cursor: pointer;
    
    &:last-child {
      border-bottom: none; // 最后一项不显示分割线
    }
    
    .item-title {
      font-size: 16px;
    }
    
    .arrow {
      font-size: 18px;
      color: #999;
    }
  }
}
</style>